@sprite .board {
	gwt-image: 'pinBoardBackground';
	padding: value('topFrameImg.getHeight', 'px')
		value('rightFrameImg.getWidth', 'px')
		value('bottomFrameImg.getHeight', 'px')
		value('leftFrameImg.getWidth', 'px');
	height: 100%;
	width: 100%;
}

.boardList {
	position: relative;
	\-webkit-transition: 1s ease-in-out;
	\-webkit-transition-property: left,top;  
}

.loadingImg {
	position: relative;
	top: 56px;
	left: 15px;
}

@sprite .heading {
	gwt-image: 'strip';
	text-align: center;
	color: 'firebrick';
	padding-top: 5px;
	transform: rotateZ(-5deg);
	\-webkit-transform: rotateZ(-5deg);
	\-moz-transform: rotateZ(-5deg);
	\-o-transform: rotateZ(-5deg);
	\-ms-transform: rotateZ(-5deg);
}

@sprite .leftTopFrame {
	gwt-image: 'leftTopFrameImg';
	position: absolute;
	top: 0;
	left: 0;
}

@sprite .topFrame {
	gwt-image: 'topFrameImg';
	position: absolute;
	top: 0;
	left: value('leftTopFrameImg.getWidth', 'px');
	right: value('rightTopFrameImg.getWidth', 'px');
}

@sprite .rightTopFrame {
	gwt-image: 'rightTopFrameImg';
	position: absolute;
	top: 0;
	right: 0;
}

@sprite .rightFrame {
	gwt-image: 'rightFrameImg';
	position: absolute;
	right: 0;
	top: value('rightTopFrameImg.getHeight', 'px');
	bottom: value('rightBottomFrameImg.getHeight', 'px');
}

@sprite .rightBottomFrame {
	gwt-image: 'rightBottomFrameImg';
	position: absolute;
	bottom: 0;
	right: 0;
}

@sprite .bottomFrame {
	gwt-image: 'bottomFrameImg';
	position: absolute;
	bottom: 0;
	left: value('leftBottomFrameImg.getWidth', 'px');
	right: value('rightBottomFrameImg.getWidth', 'px');
}

@sprite .leftBottomFrame {
	gwt-image: 'leftBottomFrameImg';
	position: absolute;
	bottom: 0;
	left: 0;
}

@sprite .leftFrame {
	gwt-image: 'leftFrameImg';
	position: absolute;
	left: 0;
	top: value('leftTopFrameImg.getHeight', 'px');
	bottom: value('leftBottomFrameImg.getHeight', 'px');
}

.emptyText {
	margin-top: 50px;
	font-family: 'Domin';
	font-size: 40px;
	text-align: center;
	text-fill-color: white;
	text-stroke-color: #C3894A;
	text-stroke-width: 1.5px;
	\-webkit-text-fill-color: white;
	\-webkit-text-stroke-color: #C3894A;
	\-webkit-text-stroke-width: 1.5px;
	\-moz-text-fill-color: white;
	\-moz-text-stroke-color: #C3894A;
	\-moz-text-stroke-width: 1.5px;
	\-o-text-fill-color: white;
	\-o-text-stroke-color: #C3894A;
	\-o-text-stroke-width: 1.5px;
	\-ms-text-fill-color: white;
	\-ms-text-stroke-color: #C3894A;
	\-ms-text-stroke-width: 1.5px;
}

.board .poZit-container {
	box-shadow: 0px 0px 0px;
}

.board .poZit-focused {
	box-shadow: 0px 0px 15px #D19758;
}

.dragging {
	cursor: move;
	z-index: 21;
}

.disappear {
	display: none;
}

.bin {
	position: absolute;
	bottom: 25px;
	right: 25px;
	z-index: 22;
}

@sprite .emptyBin {
	gwt-image: 'emptyBin';
}

@sprite .fullBin {
	gwt-image: 'fullBin';
	cursor: pointer;
}

@sprite .emptyBin.binActive,.emptyBin:hover {
	gwt-image: 'emptyBinHover';
}

@sprite .fullBin.binActive,.fullBin:hover {
	gwt-image: 'fullBinHover';
}

@sprite .undoButton {
	gwt-image: 'undo';
	position: absolute;
	bottom: 100px;
	right: 50px;
	cursor: pointer;
	border: 0px;
}

.undoButton:active {
	transform: rotateZ(-15deg);
	\-webkit-transform: rotateZ(-15deg);
	\-moz-transform: rotateZ(-15deg);
	\-o-transform: rotateZ(-15deg);
	\-ms-transform: rotateZ(-15deg);
}

.btnLeftArrow {
	position: absolute;
	left: value('leftFrameImg.getWidth', 'px');
	top: 45%;
	background-color: transparent;
	border: 0px;
	cursor: pointer;
	width: value('leftArrowImg.getWidth','px');
	height: value('leftArrowImg.getHeight','px');
/*	\-webkit-transition: -webkit-transform 1s linear;*/
}

/*
.btnLeftArrow:active {
	\-webkit-transform: rotateY(45deg);
}
*/

@sprite .leftArrow {
	gwt-image: 'leftArrowImg';
	position: absolute;
	left: 0px;
	top: 0px;
	\-webkit-animation-name: pulse;
	\-webkit-animation-duration: 5s;
	\-webkit-animation-iteration-count: infinite;
	\-webkit-animation-direction: alternate;
}

@sprite .leftArrowHalo {
	gwt-image: 'leftArrowHoverImg';
	position: absolute;
	left: 0px;
	top: 0px;
	\-webkit-animation-name: pulse;
	\-webkit-animation-duration: 5s;
	\-webkit-animation-iteration-count: infinite;
	\-webkit-animation-direction: alternate;
	\-webkit-animation-delay: 5s;
}

.btnRightArrow {
	position: absolute;
	right: value('rightFrameImg.getWidth', 'px');
	top: 45%;
	background-color: transparent;
	border: 0px;
	cursor: pointer;
	width: value('rightArrowImg.getWidth','px');
	height: value('rightArrowImg.getHeight','px');
/*	\-webkit-transition: -webkit-transform 1s linear;*/
}

/*
.btnRightArrow:active {
	\-webkit-transform: rotateY(-45deg);
}
*/

@sprite .rightArrow {
	gwt-image: 'rightArrowImg';
	position: absolute;
	right: 0px;
	top: 0px;
	\-webkit-animation-name: pulse;
	\-webkit-animation-duration: 5s;
	\-webkit-animation-iteration-count: infinite;
	\-webkit-animation-direction: alternate;
}

@sprite .rightArrowHalo {
	gwt-image: 'rightArrowHoverImg';
	position: absolute;
	right: 0px;
	top: 0px;
	\-webkit-animation-name: pulse;
	\-webkit-animation-duration: 5s;
	\-webkit-animation-iteration-count: infinite;
	\-webkit-animation-direction: alternate;
	\-webkit-animation-delay: 5s;
}

.btnUpArrow {
	position: absolute;
	left: 45%;
	top: value('topFrameImg.getHeight', 'px');
	background-color: transparent;
	border: 0px;
	cursor: pointer;
	width: value('upArrowImg.getWidth','px');
	height: value('upArrowImg.getHeight','px');
/*	\-webkit-transition: -webkit-transform 1s linear;*/
}

/*
.btnUpArrow:active {
	\-webkit-transform: rotateX(45deg);
}
*/

@sprite .upArrow {
	gwt-image: 'upArrowImg';
	position: absolute;
	left: 0px;
	top: 0px;
	\-webkit-animation-name: pulse;
	\-webkit-animation-duration: 5s;
	\-webkit-animation-iteration-count: infinite;
	\-webkit-animation-direction: alternate;
}

@sprite .upArrowHalo {
	gwt-image: 'upArrowHoverImg';
	position: absolute;
	left: 0px;
	top: 0px;
	\-webkit-animation-name: pulse;
	\-webkit-animation-duration: 5s;
	\-webkit-animation-iteration-count: infinite;
	\-webkit-animation-direction: alternate;
	\-webkit-animation-delay: 5s;
}

.btnDownArrow {
	position: absolute;
	left: 45%;
	bottom: value('bottomFrameImg.getHeight', 'px');
	background-color: transparent;
	border: 0px;
	cursor: pointer;
	width: value('downArrowImg.getWidth','px');
	height: value('downArrowImg.getHeight','px');
/*	\-webkit-transition: -webkit-transform 1s linear;*/
}

/*
.btnDownArrow:active {
	\-webkit-transform: rotateX(-45deg);
}
*/

@sprite .downArrow {
	gwt-image: 'downArrowImg';
	position: absolute;
	left: 0px;
	bottom: 0px;
	\-webkit-animation-name: pulse;
	\-webkit-animation-duration: 5s;
	\-webkit-animation-iteration-count: infinite;
	\-webkit-animation-direction: alternate;
}

@sprite .downArrowHalo {
	gwt-image: 'downArrowHoverImg';
	position: absolute;
	left: 0px;
	bottom: 0px;
	\-webkit-animation-name: pulse;
	\-webkit-animation-duration: 5s;
	\-webkit-animation-iteration-count: infinite;
	\-webkit-animation-direction: alternate;
	\-webkit-animation-delay: 5s;
}